<script>
import { mapState } from 'vuex'
import AOS from "aos"
import { correctPullDown } from '@/utils/global'
import ChangePage from '@/mixins/ChangePage.vue'

// 初始化动画
AOS.init();

export default {
  name: 'teacher',
  // 混入方法，公共方法previousPage，上滑至上一页
  mixins: [ ChangePage ],
  computed: {
    // 动态计算高度
    cssVar() {
      return {
        'height': document.documentElement.clientHeight + 'px'
      }
    },
    ...mapState({
      gender: state => state.info.gender,
      annualData: state => state.annualData
    })
  },
  mounted () {
    // 打印整个 Vuex state
    console.log('Vuex State:', this.$store.state);

    // 打印 specific state 数据
    console.log('Annual Data:', this.$store.state.annualData);
    // 每个页面都要有
    correctPullDown()
  },
  methods: {
    changePage() {
      this.$router.push({
        path: '/sport/teacher'
      })
    }
  }
}
</script>

<template>
  <div v-swipeup="changePage" v-swipedown="previousPage">
    <div :class="gender === '1' ? 'teacher-boy' : 'teacher-girl'" :style="cssVar" @click="changePage">
      <!-- 这里是动画的效果，参考aos官网https://michalsnik.github.io/aos/ -->
      <div class="teacher-con">
        <div :data-aos="'fade-right'"
             data-aos-easing="ease-in-back"
             data-aos-delay="300"
             data-aos-offset="0"
             data-aos-duration="800"
             id="myText">
          <div v-if="annualData.data24" class="mt-10">
            <br/>
            <div class="mt-10">
              <p>校园网恰似灵动的丝线</p>
              <p>编织着校园的活力与精彩</p>
              <p>点滴流量汇聚成智慧的江河</p>
              <p>串联起学校运转的每个关键节点</p>
              <p>助力中南大稳步前行</p>
              <p>在数字化浪潮汹涌的2024年</p>
              <p>您勇立潮头</p>
              <p>在各大数字平台纵横驰骋</p>
              <p>过去一年您的校园网</p>
              <p>累计使用流量达到了 <span class="data">{{annualData.data24}}</span> G</p>
              <p>见证了您对中南大事业的不懈追求</p>
            </div>
          </div>
          <!-- 兜底文案 -->
          <div v-else class="mt-10">
            <br/>
            <div class="mt-10">
              <p>校园网恰似灵动的丝线</p>
              <p>编织着校园的活力与精彩</p>
              <p>点滴流量汇聚成智慧的江河</p>
              <p>串联起学校运转的每个关键节点</p>
              <p>助力中南大稳步前行</p>
              <p>在数字化浪潮汹涌的2024年</p>
              <p>您勇立潮头</p>
              <p>在各大数字平台纵横驰骋</p>
              <p>过去一年</p>
              <p>校园网见证了您的不懈奋斗</p>
              <p>每一次连接都是您努力与坚持的印记</p>
            </div>


          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>
.teacher-boy {
  background-image: url("../../assets/images/network/teacher_boy.jpg");
  background-size: 100% 100%;
}

.teacher-girl {
  background-image: url("../../assets/images/network/teacher_girl.jpg");
  background-size: 100% 100%;
}

.teacher-con {
  padding: 100px 10px;
}

p {
  color: #2E585D;
  line-height: 0.6;
}

</style>
